@use 'variables' as *;

.ads-primary,
.ads-secondary {
  display: none;
}

.ads-primary {
  margin-bottom: 10rem;
  padding: 0 2rem;
}

.ads-primary:has(#carbonads),
.ads-primary:has(#carbon-responsive),
.ads-secondary:has(#carbonads),
.ads-secondary:has(#carbon-responsive) {
  display: block;
}

#carbonads {
  width: 100%;
  display: flex;
  justify-content: center;

  a {
    border: none;
  }

  #carbon-cover {
    font-family: $brand-font;

    .carbon {

      &-reveal,
      &-large-image {
        border-radius: $radius;
      }

      &-tagline {
        font-weight: 400;
        max-inline-size: 18ch;
      }

      &-cta {
        font-weight: 500;
        color: $black;
        border-radius: $radius;
      }

      &-footer {

        button,
        .carbon-share {
          visibility: hidden;
        }

        .carbon-via {
          color: $gray-400;
        }
      }
    }
  }

  #carbon-responsive {
    font-family: $brand-font;

    a {
      color: $black;
    }

    img {
      border-radius: $radius;
    }

    .carbon-responsive-wrap {
      background-color: $gray-50;
      border-color: $gray-50;
      border-radius: $radius;
    }
  }
}

.darkmode-active {
  #carbonads {
    #carbon-cover {
      .carbon-footer {
        .carbon-via {
          color: $gray-300;
        }
      }
    }

    #carbon-responsive {
      .carbon-responsive-wrap {
        background-color: $black-transparent;
        border-color: $black-transparent;
      }

      a {
        color: $gray-100;
      }
    }
  }
}

.ads-secondary {
  margin-top: 2rem;
}